<template>
  <tm-navbar title="订单列表"></tm-navbar>
  <tm-sheet :margin="[0]" :padding="[0]">
    <tm-tabs
      :list="data.orderList"
      showTabsLineAni
      :item-width="150"
      :width="800"
      :default-name="1000"
      :activeName="data.current"
      @change="change"
    ></tm-tabs>
  </tm-sheet>
  <swiper class="gui-swiper gray" :current="data.swiperCurrent" @change="changeSwiper">
    <swiper-item v-for="idx in 5" :key="idx">
      <scroll-view scroll-y class="gui-sv" @scrolltolower="reachBottom">
        <view
          class="flex flex-col pa-20 white ma-20 round-5"
          v-for="(res, index) in orderCategoryRecordList.filter((ele) => ele.orderStatus === currentList[idx - 1])"
          :key="res.id"
        >
          <view class="flex flex-row flex-between flex-row-center-between fulled">
            <view class="flex flex-row">
              <tm-icon name="tmicon-clock" class="mr-10" />
              <tm-text>{{ res.createTime }}</tm-text>
            </view>
          </view>
          <view
            class="flex flex-row flex-between flex-row-top-start fulled pt-20"
            v-for="(item, index) in res.orderItemList"
            :key="index"
          >
            <!-- <ListImgItem :src="item.imgUrl" :width="200" :height="200"></ListImgItem> -->
            <view class="flex flex-col fulled pl-20">
              <view class="flex flex-row flex-between flex-row-center-between fulled">
                <tm-text :fontSize="34">{{ item.skuName }}</tm-text>
                <tm-text :fontSize="34">￥{{ item.skuPrice }}</tm-text>
              </view>
              <view class="flex flex-row flex-between flex-row-center-between fulled mt-10">
                <tm-text color="grey">活动金额:￥{{ item.splitActivityAmount }}</tm-text>
                <tm-text>x1</tm-text>
              </view>
              <view class="flex flex-row flex-between flex-row-center-between fulled mt-10">
                <tm-text color="grey">优惠券金额:￥{{ item.splitCouponAmount }}</tm-text>
                <tm-text color="red">￥{{ item.splitTotalAmount }}</tm-text>
              </view>
            </view>
          </view>
          <view class="flex flex-end fulled pt-20 pb-20">
            <tm-text :fontSize="34">
              现价：
              <text class="text-red">￥{{ res.totalAmount }}</text>
              原价：
              <text class="text-delete text-grey">￥{{ res.originalTotalAmount }}</text>
            </tm-text>
          </view>
          <view class="flex flex-row flex-between flex-row-center-between fulled pt-20">
            <tm-icon name="tmicon-gengduo" color="grey"></tm-icon>
            <tm-button :margin="[10]" color="grey" outlined size="small" :shadow="0" label="查看物流"></tm-button>
            <tm-button :margin="[10]" color="grey" outlined size="small" :shadow="0" label="卖了换钱"></tm-button>
            <tm-button :margin="[10]" color="orange" outlined size="small" :shadow="0" label="评价"></tm-button>
          </view>
        </view>
      </scroll-view>
      <!-- <tm-spin :load="true" v-if="data.loadStatus[idx - 1] === 'loading'"></tm-spin> -->
      <!-- <tm-divider align="center" label="我是有底线的" v-if="data.loadStatus[idx - 1] === 'nomore'"></tm-divider> -->
    </swiper-item>
  </swiper>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import tmNavbar from '@/tmui/components/tm-navbar/tm-navbar.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmTabs from '@/tmui/components/tm-tabs/tm-tabs.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
import type { OrderData, OrderRecordList } from '@/types'
import http from '@/utils/request'

const orderRecordList = ref<OrderRecordList[]>([])
const orderCategoryRecordList = ref<OrderRecordList[]>([])
const currentList = [1000, 2000, 3000, 4000, 5000]
const data: OrderData = reactive({
  current: 1000,
  orderList: [
    { key: 1000, title: '待付款', count: 0, icon: 'tmicon-alipay', orderStatus: 'UNPAID' },
    { key: 2000, title: '待发货', count: 0, icon: 'tmicon-shopping-cart-fill', orderStatus: 'WAITING_DELEVER' },
    { key: 3000, title: '待收货', count: 0, icon: 'tmicon-ios-hand', orderStatus: 'WAITING_TAKE' },
    { key: 4000, title: '待评价', count: 0, icon: 'tmicon-commentdots-fill', orderStatus: 'WAITING_COMMON' },
    { key: 5000, title: '已完结', count: 0, icon: 'tmicon - nail', orderStatus: 'FINISHED' },
  ],
})
const change = (index: number) => {
  data.current = index
  orderCategoryRecordList.value = orderRecordList.value.filter((item) => item.orderStatus === index)
}

const changeSwiper = (e) => {
  console.log(e)
}

const reachBottom = (e) => {
  console.log('触发', e)
}

onMounted(() => {
  http.get('/order/auth/orderInfo').then((res) => {
    orderRecordList.value = res.data
    change(1000)
  })
})
</script>

<style lang="scss">
.gui-sv {
  height: calc(100vh - 150rpx);
  width: 100vw;
}

.gui-swiper {
  height: calc(100vh - 84rpx);
  width: 100vw;
}
</style>
